<template>
	<div id="StroageCellUnmake">
		<h1>您正在做的业务是：库存管理--安全库存配置管理--制定安全库存配置单</h1>
			  <el-form :inline="true" class="demo-form-inline" v-model="queryCell">
			    <el-form-item label="请选择I级分类：">
			      <el-select placeholder="--请选择--"  v-model="queryCell.search_procedureFirstKindId">
			        <!-- <el-option :label="请选择" :value="null">--请选择--</el-option> -->
			          <el-option label="电子" value="01"></el-option>
			      </el-select>
			    </el-form-item>
			    <el-form-item label="请选择II级分类：">
			      <el-select placeholder="--请选择--" v-model="queryCell.search_procedureSecondKindId">
			        <!-- <el-option :label="请选择" :value="null">--请选择--</el-option> -->
			         <el-option label="计算机" value="02"></el-option>
			      </el-select>
			    </el-form-item>
			    <el-form-item label="请选择III级分类：">
			      <el-select placeholder="--请选择--" v-model="queryCell.search_procedureThirdKindId">
			        <!-- <el-option :label="请选择" :value="null">--请选择--</el-option> -->
			         <el-option label="服务器" value="03"></el-option>
			      </el-select>
			    </el-form-item>
				<el-form-item label="请输入建档时间：">
				  <el-input placeholder="请输入建档时间：" v-model="queryCell.search_procedureregisterTime1"></el-input>
				   <el-input placeholder="请输入建档时间：" v-model="queryCell.search_procedureregisterTime2"></el-input>
				</el-form-item>
			   <el-form-item>
			      <el-button type="primary" icon="el-icon-search" round @click="selBtn">查询</el-button>
			<!-- 	 <el-button type="warning" icon="el-icon-plus" @click="showAddDialog">添加</el-button> -->
			    </el-form-item>
			  </el-form>
		<el-table
		  :data="cellAry"
		  style="width: 100%">
		  <el-table-column
		    prop="productId"
		    label="产品编号"
		    width="200">
		  </el-table-column>
		  <el-table-column
		    prop="productName"
		    label="产品名称"
		    width="200">
		  </el-table-column>
			<el-table-column
			  prop="type"
			  label="用途类型"
			  width="200">
			  <template slot-scope="scope">
			  				  <span v-if="scope.row.type=='Y001-1'">商品</span>
			  				  <span v-else-if="scope.row.type=='Y001-2'">物料</span>
			  				  <span v-else>低档</span>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="productClass"
			  label="档次级别"
			  width="200">
			  <template slot-scope="scope">
				  <span v-if="scope.row.productClass=='D001-1'">高档</span>
				  <span v-else-if="scope.row.productClass=='D001-2'">中档</span>
				  <span v-else>低档</span>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="firstKindName"
			  label="I级分类"
			  width="200">
			</el-table-column>
			<el-table-column
			  prop="secondKindName"
			  label="II级分类"
			  width="200">
			</el-table-column>
			<el-table-column
			  prop="thirdKindName"
			  label="III级分类"
			  width="200">
			</el-table-column>
		  <!--操作列-->
		  <el-table-column label="操作">
		  <template slot-scope="scope">
		    <el-button
		      size="mini"
		      @click="handleEdit(scope.$index, scope.row)">制定</el-button>
		  </template>
		</el-table-column>
		</el-table>
		<!---分页组件-->
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="currentPage"
		  :page-sizes="pageSizeList"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="total">
		</el-pagination>
		
		<!-- 添加对话框 -->
			<el-dialog title="您正在做的业务是：库存管理--安全库存配置管理--制定安全库存配置单" :visible.sync="addFormVisible">
				  <input type="hidden" v-model="addForm.custId">
			  <el-form :model="form">
			    <el-form-item label="产品名称" :label-width="formLabelWidth">
			      <el-input v-model="addForm.productName" autocomplete="off"></el-input>
			    </el-form-item>
				
			    <el-form-item label="产品编号" :label-width="formLabelWidth">
				     <el-input v-model="addForm.productId" autocomplete="off"></el-input>
			    </el-form-item>
				<el-form-item label="库存报警下限数：" :label-width="formLabelWidth">
				   <el-input v-model="addForm.minAmount" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="库存报警上限数：" :label-width="formLabelWidth">
				   <el-input v-model="addForm.maxAmount" autocomplete="off"></el-input>
				</el-form-item>
				
				<el-form-item label="登记人：" :label-width="formLabelWidth">
				  <el-input v-model="addForm.register" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="登记时间：" :label-width="formLabelWidth">
				  <el-input v-model="addForm.registerTime" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="最大存储量：" :label-width="formLabelWidth">
				  <el-input v-model="addForm.maxCapacityAmount" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="当前存储量：" :label-width="formLabelWidth">
				  <el-input v-model="addForm.amount" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="配置要求：" :label-width="formLabelWidth">
				  <el-input v-model="addForm.config" autocomplete="off"></el-input>
				</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="addFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="saveUpd">提交</el-button>
			  </div>
			</el-dialog>
	</div>
</template>

<script>
	import axios from "axios";
	export default{
		name:'StorageCellUnmake',
		data() {
			return{
				//查询条件
				queryCell:{
					search_procedureFirstKindId:"",
					search_procedureSecondKindId:"",
					search_procedureThirdKindId:"",
					search_procedureregisterTime1:"",
					search_procedureregisterTime2:"",
				},
				addForm:{},
				addFormVisible:false,
				formLabelWidth:'120px',
				//库存查询数据
				cellAry:[],
				// 当前页号
				currentPage: 1,
				// 当前页大小
				pageSize: 5,
				// 总记录数
				total: 13,
				// 页大小列表
				pageSizeList: [2, 5, 10, 20],
			}
		},
		methods:{
			//制定安全库存配置单
			async saveUpd(){
				//用es6的解构函数
				const{data:res}=await this.$http.post
				('/design/storage/add',this.addForm)
				console.log(res);
				if(res == 'ok') {
				  // 隐藏
				  this.addFormVisible = false
				  // 消息提示
				  this.$message('添加成功')
				  // 刷新表格
				  this.StroageCellPage()
				}
			},
			  // 分页查询安全库存信息
			async StroageCellPage() {
			  // 用es6的解构函数
			  const {data: res} = await this.$http.post
			  (`/design/file/unMakeStorageList/${this.currentPage}/${this.pageSize}`, this.queryCell)
			console.log(res);
			  this.cellAry = res.rows
			  this.total = res.total
			},
			handleEdit(index, row) {
				this.addFormVisible=true
				   const productId = row.productId
				   axios.post(`http://localhost:8989/design/file/listByProductId?productId=${productId}`).then((res)=>{
					   console.log(2000,res);
				   				// 获取当页数据集合，绑定到表格
				   				this.addForm = res.data
				   })
			  },
			// asyns handleEdit(index, row){
			// 	this.addFormVisible=true
			// 	const productId = row.productId
			// 	const {data:res} = await this.$http.post
			// 	(`/design/file/listByProductId?productId=${productId}`)
			// 	this.addForm = res.data
			// },
			  // 页大小改变
			  handleSizeChange(val) {
			      this.pageSize = val
			      this.StroageCellPage()
			  },
			  // 页号改变
			  handleCurrentChange(val) {
			    this.currentPage = val
			    // 重新查询
			    this.StroageCellPage()
			  },
			  selBtn(){
			    this.StroageCellPage(),
			      this.currentPage = 1
			  },
			},
		created() {
			this.StroageCellPage()
		}
	}
	
</script>

<style>
</style>